package ui.home.column3.chat


import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults

import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.PointerEventType
import androidx.compose.ui.input.pointer.onPointerEvent
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import state.WindowType
import theme.EasyChatTheme
import ui.compose.RectIconButton
import ui.home.HomeViewModel


/**
 * @author wei kunJie
 * @date 2024/3/13 23:41:30
 * 消息输入区
 */
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun SendMessageInput(easyChatTheme: MutableState<EasyChatTheme>, homeViewModel: HomeViewModel) {

    Column(modifier = Modifier.fillMaxWidth().height(218.dp)) {
        //输入项目栏，表情，语音什么的
        Row(
            modifier = Modifier.fillMaxWidth().height(45.dp).padding(horizontal = 18.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            val iconModifier = Modifier.size(26.dp)
            val isPointerEnter = remember { mutableStateOf(-1) }
            RectIconButton(
                onClick = {

                },
                modifier = Modifier.size(30.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .background(color = Color.Transparent)
                    .onPointerEvent(PointerEventType.Enter) { isPointerEnter.value = 0 }
                    .onPointerEvent(PointerEventType.Exit) { isPointerEnter.value = -1 },
            ) {
                Icon(
                    painter = painterResource("icon/ic_emojis.svg"),
                    contentDescription = "表情",
                    modifier = Modifier.size(27.5.dp),
                    tint = if (isPointerEnter.value == 0) easyChatTheme.value.mainColor else Color.Black
                )
            }
            Spacer(modifier = Modifier.width(16.dp))
            RectIconButton(
                onClick = {

                },
                modifier = Modifier.size(30.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .background(color = Color.Transparent)
                    .onPointerEvent(PointerEventType.Enter) { isPointerEnter.value = 1 }
                    .onPointerEvent(PointerEventType.Exit) { isPointerEnter.value = -1 },
            ) {
                Icon(
                    painter = painterResource("icon/ic_picture.svg"),
                    contentDescription = "图片",
                    modifier = iconModifier,
                    tint = if (isPointerEnter.value == 1) easyChatTheme.value.mainColor else Color.Black
                )
            }
            Spacer(modifier = Modifier.width(16.dp))
            RectIconButton(
                onClick = {

                },
                modifier = Modifier.size(30.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .background(color = Color.Transparent)
                    .onPointerEvent(PointerEventType.Enter) { isPointerEnter.value = 2 }
                    .onPointerEvent(PointerEventType.Exit) { isPointerEnter.value = -1 },
            ) {
                Icon(
                    painter = painterResource("icon/ic_window_shaky.svg"),
                    contentDescription = "窗口抖动",
                    modifier = iconModifier,
                    tint = if (isPointerEnter.value == 2) easyChatTheme.value.mainColor else Color.Black
                )
            }
            Spacer(modifier = Modifier.width(16.dp))
            RectIconButton(
                onClick = {

                },
                modifier = Modifier.size(30.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .background(color = Color.Transparent)
                    .onPointerEvent(PointerEventType.Enter) { isPointerEnter.value = 4 }
                    .onPointerEvent(PointerEventType.Exit) { isPointerEnter.value = -1 },
            ) {
                Icon(
                    painter = painterResource("icon/ic_voice.svg"),
                    contentDescription = "语音",
                    modifier = iconModifier,
                    tint = if (isPointerEnter.value == 4) easyChatTheme.value.mainColor else Color.Black
                )
            }
        }
        //输入框
        Box(modifier = Modifier.fillMaxWidth().weight(1f)) {
            val state = rememberScrollState(0)
            val isActivityVerticalScrollbar = remember { mutableStateOf(false) }
            BasicTextField(
                value = homeViewModel.textInput.value,
                textStyle = TextStyle(
                    fontSize = 15.sp,
                    color = Color.Black
                ),
                onValueChange = { homeViewModel.textInput.value = it },
                modifier = Modifier.fillMaxSize()
                    .verticalScroll(state)
                    .onPointerEvent(PointerEventType.Enter) { isActivityVerticalScrollbar.value = true }
                    .onPointerEvent(PointerEventType.Exit) { isActivityVerticalScrollbar.value = false }
                    .padding(horizontal = 18.dp),
            )
            //只有当鼠标进入时才出现滚动条
            if (isActivityVerticalScrollbar.value) {
                VerticalScrollbar(
                    modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
                    adapter = rememberScrollbarAdapter(
                        scrollState = state
                    )
                )
            }
        }
        Row(
            horizontalArrangement = Arrangement.End,
            modifier = Modifier.fillMaxWidth().padding(20.dp)
        ) {
            //发送按钮
            Button(
                modifier = Modifier.height(32.dp).width(80.dp),
                onClick = {
                    if (homeViewModel.textInput.value != "") {
                        //发送消息
                        homeViewModel.sendTextMsg(homeViewModel.textInput.value)
                        homeViewModel.textInput.value = ""//清空
                    }

                },
                shape = RoundedCornerShape(7.dp),
                colors = if (homeViewModel.textInput.value.isNotEmpty())
                    ButtonDefaults.buttonColors(backgroundColor = easyChatTheme.value.mainColor)
                else
                    ButtonDefaults.buttonColors(backgroundColor = easyChatTheme.value.mainColor),
//                enabled = textInput.value.isNotEmpty()
            ) {
                Text(
                    text = "发送",
                    style = TextStyle(
                        textAlign = TextAlign.Center,
                        fontSize = 13.sp,
                        color = if (homeViewModel.textInput.value.isNotEmpty()) Color.Black else Color(0xDD757678)
                    )
                )
            }
        }
    }
}